<template>
  <div class="editCategory">
    <!-- 顶部 -->
    <div class="main-t">
      <!-- 导航栏 -->
      <div class="banner">
        <van-nav-bar>
          <template #left>
            <van-icon name="arrow-left" color="black" @click="back" />
          </template>
          <template #title>
            <div class="banner-title">{{ title }}</div>
          </template>
        </van-nav-bar>
      </div>
    </div>
    <!-- 中部 -->
    <div class="main-c">
      <!-- 分类名称 -->
      <div class="category" v-if="type === '1' || type === '3'">
        <div class="category-title">一级分类</div>
        <div class="category-input">
          <van-cell-group inset class="group">
            <van-field v-model="mainCategory" placeholder="请输入分类名称" maxlength="4" readonly>
              <template #extra>
                <div class="category-icon">
                  <van-image :src="mcImg_01" height="30" width="30"></van-image>
                </div>
              </template>
            </van-field>
          </van-cell-group>
        </div>
      </div>
      <div class="category" style="margin-top: 15px;">
        <div class="category-title" v-if="type === '0' || type === '2'">分类名称</div>
        <div class="category-input">
          <van-cell-group inset class="group">
            <van-field v-model="categoryName" placeholder="请输入分类名称" maxlength="4">
              <template #extra>
                <div class="category-icon" v-if="type == '0' || type =='2'">
                  <van-image :src="mcImg_01" height="30" width="30"></van-image>
                </div>
              </template>
            </van-field>
          </van-cell-group>
        </div>
      </div>
      <!-- 公共分类 -->
      <div class="common-category">
        <!-- 分类标签 -->
        <van-nav-bar class="mainCategory-bar">
          <template #title>
            <van-tabs v-model:active="tabsActive" @click-tab="changeCategoryList($event)" type="card"
              color="rgb(46,53,72)">
              <van-tab v-for="(item, index) in commonCategoryList" :key="item.id" :title="item.text" />
            </van-tabs>
          </template>
        </van-nav-bar>
        <!-- 分类名称 -->
        <div class="mainCategory-name">
          {{ changeCategoryListValText }}
        </div>
        <!-- 分类图标 -->
        <div class="category-list">
          <div class="category-item" v-for="scCategory in commonCategoryList[changeCategoryListIndex].subCategoryList"
            :key="scCategory.id">
            <div class="category-icon" @click="changeCategory(scCategory)" :class="{ active: scCategory.active }">
              <van-image :src="scCategory.icon"></van-image>
            </div>
            <div class="category-text">{{ scCategory.text }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="main-b">
      <div class="fixedBtn" @click="save()">保存</div>
    </div>
  </div>
</template>

<script setup lang="ts" name="EditCategory">
// 编辑 分类/子分类
// 添加 分类/子分类
import { ref, reactive, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import useCategoryCommon from '@/hooks/useCategoryCommon'

import mcImg_01 from '@/icon/068_餐饮_分类.svg'

const router = useRouter()
const route = useRoute()

let categoryName:any = ref('')
let tabsActive = ref()

let type = route.query.type // 0 添加分类 1添加子分类 2编辑分类 3编辑子分类 
let mainCategory:any = route.query.mainCategory // 父分类名称，

let title = computed({
  get() {
    switch (type) {
      case '0':
        return '添加分类'
      case '1':
        return '添加子分类'
      case '2':
        categoryName.value = route.query.categoryName
        return '编辑分类'
      case '3':
        categoryName.value = route.query.categoryName
        return '编辑子分类'
    }
  },
  set() { }
})


// 返回上一页
function back() {
  router.go(-1)
}

// 通用分类列表
let { commonCategoryList } = useCategoryCommon()

// 被选中的主分类列表名称
let changeCategoryListValText = ref(commonCategoryList[0].text)
// 被选中分主分类索引
let changeCategoryListIndex = ref(0)

// 切换分类列表.value
function changeCategoryList(value: any) {
  changeCategoryListIndex.value = value.name
  changeCategoryListValText.value = commonCategoryList[value.name].text
}

// 被选中的分类
let changeCategoryVal = reactive(commonCategoryList[0])

// 选中子分类
function changeCategory(scCategory: any) {
  // 设置上一个被选中的分类的属性
  changeCategoryVal.active = false
  // 更新最新选中的分类的属性
  scCategory.active = true
  // 更新被选中的分类
  changeCategoryVal = scCategory
  // 更新 input 框名称
  categoryName.value = scCategory.text

  console.log(scCategory)
}

// 保存
function save() {
  console.log("保存")
}

</script>

<style scoped lang="less">
@gabelMargin : 20px; // 全局margin
@gabelBgColor : rgb(181, 202, 161);
@garyFontColor : rgb(125, 125, 125);

.editCategory {
  height: 100vh;
}

.main-t {
  .banner-title {
    font-size: 32px;
  }
}

.main-c {
  .category {
    position: relative;

    .category-title {
      position: absolute;
      z-index: 1;
      font-size: 30px;
      top: -22px;
      left: 60px;
      color: @garyFontColor;
    }

    .category-input {
      width: 100%;
      display: flex;

      .group {
        width: 100%;
        border-radius: 100px;
      }

      .van-cell {
        align-items: center;
        background-color: rgb(241, 241, 241);
      }

      .category-icon {
        display: flex;
        align-items: center;
      }

    }
  }

  .common-category {
    margin: 0 @gabelMargin;

    .mainCategory-name {
      font-size: 30px;
      margin: 0 40px;
    }

    .category-list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;

      .category-item {
        margin: 10px 7px;
        width: 23%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .category-icon {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100px;
          height: 100px;
          background-color: rgb(240, 240, 240);
          border-radius: 50%;
        }

        .category-icon.active {
          background-color: @gabelBgColor;
        }

        .category-text {
          font-size: 25px;
        }
      }
    }
  }
}
</style>